<template>
<div id="movie-detail">
    <ul>
        <li class="top-head">
            <i class="fa fa-arrow-left arrow-left" @touchend="handleBack"></i>
            <h2 :class="isShow? 'is-show':''" v-show="isShow">{{movieDetail.name}}</h2>
        </li>
        <!-- 影图 -->
        <li class="img-bg" ref="bg">
            <img v-if="movieDetail.poster" :src="movieDetail.poster" :alt="movieDetail.name">
            <movie-mask v-else :info="'暂无影图'"/>
        </li>
        <!-- 影片信息 -->
        <li class="movie-info">
            <div class="info-title">
                <div class="title">
                    <h3>{{movieDetail.name}}</h3>
                    <span>{{itemName}}</span>
                </div>
                <span v-if="movieDetail.grade"><i>{{movieDetail.grade}}</i> 分</span>
            </div>
            <p class="info-type">{{movieDetail.category}}</p>
            <p class="info-time">{{movieDetail.premiereAt}} 上映</p>
            <p class="info-nation">
                {{movieDetail.nation}} | {{movieDetail.runtime}}分钟
            </p>
            <p class="info-detail2" ref="detailHeight2">{{movieDetail.synopsis}}</p>
            <p class="info-detail" ref="detailHeight">{{movieDetail.synopsis}}</p>
            <i class="fa angle-down" :class="autoHeight? 'fa-angle-up':'fa-angle-down'" @touchend="handleChangeHeight"></i>
        </li>
        
        <!-- 演职人员 -->
        <li class="movie-actors">
            <p>演职人员</p>
            <ul class="actors" v-if="movieDetail.actors">
                <li class="actor-item" v-for="item in movieDetail.actors" :key="item.avatarAddress">
                    <img :src="item.avatarAddress" :alt="item.role">
                    <p>{{item.name}}</p>
                    <p>{{item.role}}</p>
                </li>
            </ul>
            <movie-mask v-else :info="'暂无演职人员'"/>
        </li>
        <li class="stills">
            <div class="stills-top">
                <p>剧照</p>
                <p>
                    全部({{photosLength}})
                    <i class="fa fa-angle-right"></i>
                </p>
            </div>
            
            <!-- 剧照轮播 -->
            <div v-if="movieDetail.photos" class="detail_player swiper-container" ref="detail_player">
                <ul class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in movieDetail.photos" :key="item">
                        <img :src="item" :alt="item" @error="handleError">
                    </div>
                </ul>
            </div>
            <movie-mask v-else :info="'暂无剧照'"/>
        </li>
    </ul>
</div>
</template>

<script>
import MovieMask from "@/components/MovieMask"
export default {
    name: "filmDetail",
    props: ["movieId"], /* 需在路由router中配置: props: { filmDetail: true } */
    data() {
		return {
			movieDetail: {},
			itemName: "",
			photosLength: 0,
			isShow: false,
			autoHeight: false,
			heightVal: 0,
		}
    },
    components: {
        MovieMask
    },
	mounted() {
        this.getMovieDetailList()
		window.onscroll = this.getScroll
        this.$store.commit("footerTab/HIDEFOOTERTAB", false)
    },
	beforeDestroy() {
        window.onscroll = null
        this.$store.commit("footerTab/HIDEFOOTERTAB", true)
	},
	methods: {

        handleError() {
            this.style.visibility = "hidden"
            console.clear()
            console.error("%c剧照图片加载失败", "background: #ff2326;color:#000000;font-size:20px;font-weight:bolder;padding:4px 8px;");
        },
        
        // 展开详情信息
		handleChangeHeight() {
			this.heightVal = this.$refs.detailHeight2.offsetHeight
			this.autoHeight = !this.autoHeight
			// console.log(this.heightVal)
			if(this.autoHeight) {
				this.$refs.detailHeight.style.height = this.heightVal+"px"
			} else {
				this.$refs.detailHeight.style.height = "40px"
			}
		},
		
		// 滚动显示头部标题
		getScroll() {
            let sTop = document.documentElement.scrollTop || document.body.scrollTop
            let bgHeight = (this.$refs.bg.offsetHeight)*2/3
            // console.log(sTop, bgHeight)

			if(sTop >= bgHeight) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
		
		// 获取影片详情
		getMovieDetailList() {
			// console.log(this.$route.params)
			this.axios({
				url: "https://m.maizuo.com/gateway?filmId="+this.movieId,
				headers: {
					"X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"1583716737571230650801","bc":"310100"}',
					"X-Host": "mall.film-ticket.film.info"
				}
			}).then(res => {
				// console.log(res.data.data.film)
				if(res.data.msg === "ok") {
                    setTimeout(() => {
                        this.movieDetail = res.data.data.film;
                        // 演员的名字
                        this.itemName = this.movieDetail.item.name
                        // 剧照列表的长度
                        this.photosLength = this.movieDetail.photos? this.movieDetail.photos.length : 0
                        // 空格格式化
                        this.movieDetail['category'] = this.movieDetail['category'].replace(/\|/g, " | ")
                        // 时间格式化
                        let data = this.movieDetail['premiereAt']
                        data = data.toString().padEnd(13, "0")
                        let d = new Date(Number(data));
                        this.movieDetail['premiereAt'] = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`;
                        // 轮播图初始化
                        this.$nextTick(() => {
                            new Swiper(this.$refs.detail_player, {
                                loop: true, // 循环模式选项
                                sliderPerView: 3,
                                // freeMode: true,
                                // freeModeSticky: true,
                                autoHeight: true,
                            }) 
                        })
                    }, 300);
				}
			})
		},
		
		// 返回
		handleBack() {
			this.$router.go(-1)
		}
    },
}
</script>

<style scoped>
#movie-detail {
	position: absolute;
	left:0;
	top:0;
	z-index: 100;
	width:100%;
	min-height: 100%;
	background-color: #EEEEEE;
	animation: slideMove .35s ease;
}
@keyframes slideMove{
    0%{ transform : translateX(100%);opacity:0;}
    100%{ transform : translateX(0);opacity: 1;}
}
#movie-detail .top-head {
	position: fixed;
	top: 0;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: rgba(3, 206, 3, 0);
	z-index: 60;
}
#movie-detail .top-head .arrow-left {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
	line-height: 30px;
    border-radius: 30px;
    background-color: rgba(3, 206, 3, 1);
}

.is-show {
	/* transition: all .3s ease; */
	background-color: rgba(3, 206, 3, 1);
}

#movie-detail .img-bg {
	width: 100%;
	height: 100%;
}
#movie-detail .img-bg>img {
	width: 100%;
}

#movie-detail .movie-info,
#movie-detail .movie-actors {
	overflow: hidden;
	white-space: nowrap;
	padding: 12px 15px 15px;
	background-color: #ffffff;
	color: #2a2a2a;
	font-size: 14px;
}
#movie-detail .movie-info .info-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
}
#movie-detail .movie-info .info-title .title {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-weight: bold;
}
#movie-detail .movie-info .info-title .title>span {
	height: 15px;
	line-height: 15px;
	text-align: center;
	margin-left: 10px;
	margin-top: 15px;
	padding: 0 2px;
	font-size: 12px;
	background-color: #cccccc;
	color: white;
}
#movie-detail .movie-info .info-title>span {
	color: #ffb841;
}
#movie-detail .movie-info .info-title>span>i {
	font-size: 20px;
}
#movie-detail .movie-info .info-type,
#movie-detail .movie-info .info-time,
#movie-detail .movie-info .info-nation {
	overflow: hidden;
	width: calc(100% - 50px);
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 5px 0 0;
}
#movie-detail .movie-info .info-detail {
	overflow-y: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	height: 40px;
	margin-top: 15px;
	transition: all .5s ease;
}
#movie-detail .movie-info .info-detail2 {
	position: absolute;
	top: 1px;
	width: calc(100% - 30px);
	opacity: 0;
	margin-left: -300%;
	white-space: normal;
}
#movie-detail .movie-info .angle-down {
	display: block;
	width: 20px;
	height: auto;
	line-height: normal;
	margin: auto;
	text-align: center;
	font-size: 24px;
}

#movie-detail .movie-actors {
	margin-top: 10px;
}
#movie-detail .movie-actors>p {
	padding: 15px 0;
	font-size: 16px;
}
#movie-detail .movie-actors .actors {
    overflow-x: scroll;
    overflow-y: hidden;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
}
/* #movie-detail .movie-actors .actors::-webkit-scrollbar {
    display: none;
} */
#movie-detail .movie-actors .actor-item {
    flex-shrink: 0;
    display: inline-block;
    width: 120px;
	padding: 0 3px;
	text-align: center;
}
#movie-detail .movie-actors .actor-item>img {
	width: 100%;
}
#movie-detail .movie-actors .actor-item>p{
	overflow: hidden;
	width: calc(100% - 2px);
	white-space: nowrap;
	text-overflow: ellipsis;
}

#movie-detail .stills {
	margin-top: 10px;
	margin-bottom: 30px;
	background-color: #fff;
}
#movie-detail .stills .stills-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 40px;
	line-height: 40px;
	padding: 8px 15px;
}
#movie-detail .stills img {
	width: 100%;
}
</style>